<template>
  <div>
    <cus-search>
      <cus-search-item>
        <Button class="mr_10 mb_20" @click="getMenuListApi" v-permission="10">查询</Button>
        <Button class="mr_10 mb_20" type="primary" @click="onAdd" v-permission="20"
          >新增</Button
        >
      </cus-search-item>
    </cus-search>
    <div class="content-bottom">
      <cus-card title="菜单列表" class="mt_20">
        <cusTable
          border
          :loading="form.loading"
          :columns="columns"
          :data="data"
          :size="vuex_config.tableSize"
        >
          <template slot-scope="{ row, index }" slot="name">
            <collapseArrow :index="index" :row="row" @onClick="onClick">{{
              row.name
            }}</collapseArrow>
          </template>

          <template slot-scope="{ row, index }" slot="resourceType">
            <Tag color="primary" v-if="row.resourceType == 1">目录</Tag>
            <Tag color="success" v-if="row.resourceType == 2">菜单</Tag>
          </template>
          <template slot-scope="{ row, index }" slot="gmtCreate">
            {{ row.gmtCreate | formatTime("yyyy-MM-dd hh-mm-ss") }}
          </template>

          <template slot-scope="{ row, index }" slot="icon">
            <Icon :type="row.icon" size="28"></Icon>
          </template>
          <template slot-scope="{ row }" slot="operation">
            <div class="flex">
              <Button
                type="primary"
                size="small"
                :style="{ marginRight: '6px' }"
                @click="onEdit(row)"
                v-permission="30"
              >
                修改
              </Button>
              <Button type="error" size="small" @click="onDelete(row)" v-permission="40">
                删除
              </Button>
            </div>
          </template>
        </cusTable>
      </cus-card>
    </div>
    <menuModal ref="menuModal"></menuModal>
  </div>
</template>

<script>
import { getMenuList, deleteMenu } from "@/api/organ/system";
import collapseArrow from "./components/collapseArrow";
import menuModal from "./components/menuModal";

export default {
  components: { menuModal, collapseArrow },
  name: "menuManage",
  data() {
    return {
      form: {
        loading: true,
      },
      tableHeight: 0,
      data: [],
      columns: [
        {
          title: "名称",
          minWidth: 200,
          slot: "name",
          align: "left",
          fixed: "left",
        },
        {
          title: "图标",
          minWidth: 100,
          slot: "icon",
          align: "center",
        },
        {
          title: "类型",
          minWidth: 100,
          slot: "resourceType",
          align: "center",
        },
        {
          title: "归属",
          minWidth: 100,
          key: "unitLevelCodeName",
          align: "center",
        },
        {
          title: "节点路由",
          minWidth: 200,
          key: "url",
          align: "center",
        },
        /*{
              title: '路由缓存',
              minWidth: 100,
              align: 'center'
            },*/
        {
          title: "文件路径",
          minWidth: 300,
          key: "filePath",
          align: "center",
        },
        /*{
              title: '权限',
              minWidth: 150,
              align: 'center'
            },*/
        {
          title: "排序号",
          minWidth: 150,
          key: "seq",
          align: "center",
        },
        {
          title: "更新时间",
          minWidth: 180,
          slot: "gmtCreate",
          align: "center",
        },
        {
          title: "操作",
          width: 170,
          fixed: "right",
          slot: "operation",
          align: "center",
        },
      ],
      router: [],
    };
  },
  mounted() {
    this.onInit();
    console.log(this.$router,'路由信息'); 
    setTimeout(() => {
      this.tableHeight = window.innerHeight - 273; // 表格自适应高度
    }, 100);
    window.addEventListener("resize", this.tableHeightChange, true);
  },
  methods: {
    onInit() {
      this.form.loading = true;
      this.getMenuListApi().then(() => (this.form.loading = false));
    },
    tableHeightChange() {
      this.tableHeight = 0;
      setTimeout(() => {
        this.tableHeight = window.innerHeight - 273; // 表格自适应高度
        console.log(this.tableHeight);
      }, 100);
    },
    onAdd() {
      this.$refs["menuModal"].show();
    },
    onEdit(row) {
      this.$refs["menuModal"].form.id = row.id;
      this.$refs["menuModal"].show();
    },
    onDelete(row) {
      this.$cu.dialog({ params: row }).then(({ id }) => {
        this.$cu.showLoading();
        this.deleteMenuApi(id);
      });
    },
    onClick(row, index) {
      this.data[index].expand = !this.data[index].expand;
      let router = this.router.filter((v) => {
        return v.pid === row.id;
      });

      router = router.map((v) => {
        v.levels = row.levels + 1;
        if (v.resourceType === 2) {
          v.showArrow = false;
        } else v.showArrow = true;
        return v;
      });

      if (!this.data[index].showArrow) return;

      if (this.data[index].expand) {
        this.data.splice(index + 1, 0, ...router);
      } else {
        let endArr = Object.assign([], this.data);
        endArr.splice(0, index + 1);

        let endIndex = endArr.findIndex((v) => {
          return v.pid == row.pid;
        });
        if (endIndex === -1) {
          endIndex = this.data.length - (index + 1);
        }

        endArr = endArr.map((v, i) => {
          if (i < endIndex) {
            v.expand = false;
          }
          return v;
        });
        this.data.splice(index + 1, endIndex);
      }
    },
    getMenuListApi() {
      this.form.loading = true;
      return new Promise((resolve) => {
        getMenuList({}).then((res) => {
          if (res.code === 1) {
            this.form.loading = false;
            let router = res.data;
            console.log(router);
            this.router = router.map((v) => {
              v.expand = false;
              v.showArrow = true;
              v.levels = 0;
              return v;
            });
            console.log(router);
            this.data = router;
            // 暂时没做单点登录没有筛选条件
            // this.data = router.filter(v => {
            //   return v.pid === null && v.type == 6;
            // })
            this.data = router.filter((v) => {
              return v.pid === null;
            });
            console.log(this.data);
            resolve();
          }
        });
      });
    },
    deleteMenuApi(id) {
      return new Promise((resolve) => {
        deleteMenu({ id: id })
          .then((res) => {
            if (res.code === 1) {
              this.$cu.hideLoading();
             
              this.$Message.success("删除成功");
              this.getMenuListApi();
              resolve();
            } else this.$cu.hideLoading(1.5);
          })
          .catch(() => this.$cu.hideLoading(1.5));
      });
    },
  },
};
</script>

<style scoped lang="less"></style>
